<template>
  <div>
    <div class="car_container">
      <div class="card" @click="isShowDetail(item,index)" v-for="(item, index) in dataList" :key="index">
        <div class="card_inner">
          <div class="loan_id">
            <div class="left_span">生源地</div>
            <div class="right_span">45122601H20190001005</div>
          </div>
          <div class="loan_title">
            <div style="color: red; float: left">{{item.duringYear}}</div>
            <div style="float: left; margin-left: 10px">学年合同</div>
          </div>
          <div class="loan_status">
            <div style="width: 100%; height: 30px; float: left; margin-top: 20px">
              {{item.isBankCheck ? item.isBankCheck : '未审批'}}
            </div>
          </div>
          <div class="loan_identity">
            <div class="electro">
              <img style="width: 28px; height: 28px; float: left; margin-left: 36px" v-if="elec" :src="elec">
              <div class="electro_span">
                <span>电子合同</span>
              </div>
            </div>
            <div class="sign">
              <img style="width: 28px; height: 28px; float: left; margin-left: 20px" v-if="sign" :src="sign">
              <div class="sign_span">
                <span>受理证明</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card" @click="$router.push('/student/credit')">
        <div class="card_inner">
          <div class="loan_id">
            <div class="left_span"></div>
            <div class="right_span"></div>
          </div>
          <div class="loan_title">

          </div>
          <div class="loan_status">
            <div style="width: 100%; height: 30px; float: left; margin-top: 20px">
              <svg style="width: 100px; height: 100px; margin-left: -20px; margin-top: -50px" t="1601435524249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3307" width="200" height="200"><path d="M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-0.042667 170.666667a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666h170.666667a42.666667 42.666667 0 0 1 0 85.333334h-170.666667v170.666666a42.666667 42.666667 0 0 1-85.333333 0v-170.666666h-170.666667a42.666667 42.666667 0 0 1 0-85.333334h170.666667V298.666667a42.666667 42.666667 0 0 1 42.666666-42.666667z" fill="#008df0" p-id="3308"></path></svg>
            </div>
          </div>
          <div class="loan_identity">
            <div class="electro">
              <div class="electro_span">
                <span></span>
              </div>
            </div>
            <div class="sign">
              <div class="sign_span">
                <span></span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <el-dialog style="width: 1600px; margin-left: -120px; margin-top: 40px" :visible.sync="dialogTableVisible" title="贷款进度详情">
      <el-steps style="margin-left: 60px" :space="200" :active="active" finish-status="success">
        <el-step title="已提交申请"></el-step>
        <el-step title="乡审批状态"></el-step>
        <el-step title="县审批状态"></el-step>
        <el-step title="银行审批状态"></el-step>
        <el-step title="贷款发放状态"></el-step>
      </el-steps>
      <el-upload style="margin-top: 40px; margin-left: 60px" :show-file-list="false" :http-request="uploadRequest" action="#" >
        <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
      </el-upload>
      <div style="margin-top: 60px; margin-left: 60px">
        <el-tooltip class="item" effect="dark" content="点击链接浏览器预览" placement="top">
          <el-link type="success"  @click="isPreview(path)">{{fileName}}</el-link>
        </el-tooltip>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Elec from "@/assets/image/电子合同.png"
  import Sign from "@/assets/image/受理证明.png"
  import { uploadFile } from '../../../api/obs/upload'
  import { getCredits } from '../../../api/county/credit'
  export default {
    data() {
      return {
        active: 1,
        elec: Elec,
        sign: Sign,
        dataList: [],
        total: '',
        dialogTableVisible: false,
        fileName: '',
        path: '',
        rules: {},
        rowData: ''
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.loading = true;
        getCredits(this.$store.state.user.name).then(response => {
          console.log(response)
          this.dataList = response.data
          this.total = response.data.length
          this.loading = false;
        });
      },
      isShowDetail(item, index) {
        console.log(item, index)
        this.rowData = item
        if (this.rowData.creditStatus === '通过') {
          this.active = 2
        }
        if (this.rowData.countyCheckStatus === '已审批') {
          this.active = 3
        }
        if (this.rowData.isBankCheck === '已审核') {
          this.active = 4
        }
        if (this.rowData.isIssue === '已发放') {
          this.active = 5
        }
        this.fileName = item.uploadWordName
        this.path = 'http://localhost:8080' + item.uploadWordPath
        this.dialogTableVisible = true
      },
      uploadRequest(data) {
        let formData = new FormData();
        formData.append("file", data.file)
        formData.append("creditId", this.rowData.creditId)
        formData.append("ContentType", 'multipart/form-data')
        uploadFile(formData).then(res => {
          if (res) {
            console.log(res)
            this.fileName = res.fileName
            this.path = 'http://localhost:8080' + res.uploadWordPath
            this.msgSuccess('上传成功!')
          }
        })
      },
      isPreview(path) {
        console.log(path)
        window.open(path)
      }
    },
  }
</script>

<style scoped>
  .car_container {
    float: left; width: 1460px; height: 1060px; background-color: #dddddd;
  }
  .card {
    float: left; width: 300px; height: 240px; background-color: red; border-radius: 10px; margin-left: 38px; margin-top: 30px;
  }
  .card:hover {
    box-shadow:0px 8px 8px #00a0e9;
  }
  .card .card_inner{
    float: left; width: 300px; height: 240px; background-color: white; margin-top: 4px; border-radius: 4px;
  }
  .loan_id {
    float: left; width: 300px; height: 20px; margin-top: 14px;
  }
  .loan_id .left_span {
    font-weight: bold; color: #00a0e9; float: left; width: 60px; margin-left: 24px;
  }
  .loan_id .right_span {
    float: left; width: 200px; font-weight: bold; color: #000000;
  }
  .card .loan_title {
    float: left; width: 300px; height: 30px; font-size: 24px; margin-left: 36px; margin-top: 20px;
  }
  .card .loan_status {
    float: left; width: 300px; height: 90px; font-size: 20px; margin-left: 120px; margin-top: 20px; color: #7a8b9a;
  }
  .card .loan_identity {
    float: left; width: 300px; height: 30px;
  }
  .card .loan_identity .electro {
    float: left; width: 150px; height: 30px;
  }
  .card .loan_identity .electro .electro_span {
    float: left; width: 70px; height: 30px; font-size: 16px; margin-left: 2px; margin-top: 6px;
  }
  .card .loan_identity .sign {
    float: left; width: 150px; height: 30px;
  }
  .card .loan_identity .sign .sign_span {
    float: left; width: 70px; height: 30px; font-size: 16px; margin-left: 2px; margin-top: 6px;
  }
</style>
